<template>
  <div>
    <!-- 定义卡片视图 -->
    <el-card>

      <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
      <div id="main" style="width: 100%;height:600px;"></div>

    </el-card>

  </div>
</template>

<script>
/* 导入echarts组件 */
import * as echarts from 'echarts';


export default {
  data() {
    return {}
  },
  created() {
  },
  //当页面dom对象初始化之后执行
  async mounted() {
    let dataName = []
    let dataNum = []
    let {
      data: result
    } = await this.$http.get("/report/getData")
    if (result.status !== 200) return this.$message.error("报表查询失败")
    result.data.forEach(item => {
      //console.log(item)
      dataName.push(item.name)
      dataNum.push(item.count)
    })

    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '京淘后台销售榜单'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: dataName
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: dataNum
      }]
    };
    myChart.setOption(option);
  },
  methods: {}
}
</script>

<style lang="less" scoped>
</style>
